<template>
    <div>
      <h4 >发表评论</h4>
      <hr/>
      <textarea placeholder="请输入评论内容" v-model="content"></textarea>
      <mt-button class="mb10" type="primary" size="large" @click="addcomment" >发表评论</mt-button>
      <hr/>
      <div class="comment-list"  v-for="(item,index) in filteredItems"   :key="item.id" >
          <div class="comment-props">
            <span>第{{index+1}}层</span>
            <span>用户:{{item.name}}</span>
            <span>评论时间：{{item.time}}</span>
          </div>

          <div class="comment-content">
              {{item.content}}
          </div>
      </div>
      <mt-button class="commengt-button" type="default" size="large" @click="jiazai" >加载更多</mt-button>
    </div>
</template>  

<script>
import { MessageBox } from 'mint-ui';
//  let pageno = 5;
export default {
    data(){
        return{
            content:"",
            id:"",
            pageno:5,
            list:[      
            ],
            result:"",
            str:"" ,  
            page:"1" 
        }
    }, 
    props:['belongid'],
    mounted(){
        console.log(this.belongid)
        
        this.$http.post('http://192.168.0.197:88/getCommentByPage',{belongId:this.belongid||this.$route.query.belongid,pageNo:this.page,},{emulateJSON:true}).then(function(res){
                console.log(res.body.data);
                console.log(res.body.data[0].user_name);
                for(var i=0;i<res.body.data.length;i++)
                {
                    let pinglun = {name:res.body.data[i].user_name,content:res.body.data[i].content,time:res.body.data[i].time};
                    this.list.unshift(pinglun)  
                }
                 
                },function(res){
                    console.log(res.status);
                });   
    },
    methods:{
        addcomment(){
            var username=window.localStorage.getItem('userName')
            var usernumber=window.localStorage.getItem('usernumber')
            console.log(username)
            console.log(this.result)
            if(username==null)
            {
                MessageBox("请登录后进行评论");
            }
            else{
                    if(this.content!="")
                {
                this.$http.post('http://192.168.0.197:88/addComment',{id:this.ran(),belongId:this.belongid,userId:usernumber,userName:username,content:this.content,time:this.result},{emulateJSON:true}).then(function(res){
                console.log(res.body.data);   
                },function(res){
                    console.log(res.status);
                });
                let comment = {id:this.ran(),content:this.content,time:this.result,name:username};
                this.list.unshift(comment);
                this.content="";           
                }
                else{
                    MessageBox("请输入评论内容")
                }
            }
            

            
        },
        jiazai(){
            this.pageno+=5;
            console.log(this.pageno)
            if(this.pageno<this.list.length){
                this.list.push(this.pageno)
            }
                    this.$http.post('http://192.168.0.197:88/getCommentByPage',{belongId:this.belongid||this.$route.query.belongid,pageNo:this.page,},{emulateJSON:true}).then(function(res){
                
                for(var i=0;i<res.body.data.length;i++)
                {
                    let pinglun = {name:res.body.data[i].user_name,content:res.body.data[i].content,time:res.body.data[i].time};
                    this.list.unshift(pinglun)  
                }
                 
                },function(res){
                    console.log(res.status);
                }); 
            
        },
    dateformat() {
            var date = new Date(),
            year = date.getFullYear(),
            month = date.getMonth() + 1,
            day = date.getDate(),
            hour = date.getHours(),
            minute = date.getMinutes(),
            second = date.getSeconds()
            const result=year+"-"+this.addZero(month)+"-"+this.addZero(day)+" "+this.addZero(hour)+":"+this.addZero(minute)+":"+this.addZero(second)
            return result
},
// 如果时间是个位数，就补0
     addZero(obj){
            return obj < 10 ? '0' + obj : obj
            },
     zero(time){
			if (time<10) {
		 		return time="0"+time;
		 	}else{
		 		return time;
		 	}
        },
       ran(){
		var five="";
		 var now = new Date();
		 var y=now.getFullYear().toString();
		 var M=this.zero(now.getMonth()+1);
		 
		 var d=this.zero(now.getDate())
		 
		 var hour=this.zero(now.getHours().toString());
		 var m=this.zero(now.getMinutes().toString());

		 var s=this.zero(now.getSeconds().toString());
		 
		 for (var i = 0; i < 5; i++) {
		 	five+=Math.round(Math.random()*9)
		 }
		
		 var str = y + M+d+hour+m+s+five;
			return str;
		
		}
	},
    created(){
        this.id = this.$route.query.id;
        this.result=this.dateformat();
        this.str=this.ran();
    },
    watch: {
    "list.length"(){
        if (this.list.length>=10)
        {
            this.page++;
        }
    }
},
    computed: {   
        filteredItems: function () {
        return this.list.slice(0,this.pageno)
      }
    }
}
</script>

<style scoped>
    h4{
        font-size: 16px;
    }
    textarea{
        font-size: 12px;
    }
    .comment-list{
        font-size: 12px;
    }
    .comment-props{
        display: flex;
        justify-content: space-between;
        background-color: #8888
    }
    .comment-list:not(:first-child){
        margin-top: 10px;
    }
    .commengt-button{
        color: red;
    }
</style>
